<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <title>悦章科技机构平台</title>
    <script src="/Public/static/jquery-2.0.3.min.js"></script>
    <script src="/Public/static/layer/layer.js"></script>
    <script src="/Public/static/jPages.js"></script>
    <!--内容样式-->
    <link rel="stylesheet" href="__PUBLIC__/Home/css/style.css" />
    <link rel="stylesheet" href="__PUBLIC__/Home/css/page.css" />
    <style>
        .holder a{border:1px solid #e1e1e1;color:#909090;cursor:pointer;}
        .jp-current{padding:6px 6px;border:1px solid #e1e1e1;background:#f55555;cursor:pointer;}
        .holder .jp-current{color:#fff;cursor:pointer;}
        .page{margin: 0 0 0 0}
        .shadowLayer{
            position: absolute;
            /*position: relative;*/
            top: 0;
            left: 0;
            z-index: 501;
            width: 100%;
            height:100%;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:rgba(0,0,0,0.75);

           
        }
        .shadowLayer .qrImage{
            width: 400px;
            height: 400px;
            background-color: #fff;
        }
    </style>
</head>
<body>
 <div class="shadowLayer">
    <div class="qrImage"></div>
 </div>
<div class="main">
    <!--  头部  -->
    <include file="menu" />

    <!--  右侧内容  -->
    <div class="content">


        <div class= "ct-title">
            <div class="ctt-bt">新增代购</div>
            <div class="divclear"></div>
        </div>

        <!-- <form class="xzdg-box" action="{:U('Home/Purchasing/addPurchasingAgent')}" method="post" class="form-horizontal"> -->
            <form  class="xzdg-box">
            <div class="xb-nr">
                <div class="xbn-zd">身份证号：</div>
                <input type="text" placeholder="请输入学生身份证号" class="xbn-wb" id="students_id_card">
                <input type="hidden" class="xbn-wb" name="id_card">
                <div class="xbn-cx" onclick="checkStudents()">查询</div>
                <span class="xbn-ts">如果是已有学生，无需再设置虚拟帐号</span>
                <div class="divclear"></div>
                <div class="xbn-jg">
                    <!--<div class="xbnj-box xbnj-box-on">张无忌  /  15575991557  /  430105199004276118</div>
                    <div class="xbnj-box">张无忌  /  15575991557  /  430105199004276118</div>
                    <div class="xbnj-box">张无忌  /  15575991557  /  430105199004276118</div>
                    <div class="xbnj-box">张无忌  /  15575991557  /  430105199004276118</div>
                    <div class="xbnj-box">张无忌  /  15575991557  /  430105199004276118</div>-->
                    <!--<div class="divclear"></div>-->
                </div>
                <div class="xbn-zd" style="margin-top: 30px;">虚拟账号：</div>
                <input type="text" placeholder="请输入6位数字虚拟账号" class="xbn-wb" name="id_account" style="margin-top: 30px;">
                <div class="xbn-cx" id="sjsc" style="margin-top: 30px;" onclick="generate()">随机生成</div>
                <div class="divclear"></div>
            </div>

            <div class="xb-nr">
                <div class="xbn-zd">代购课程：</div>
                <div class="xbn-tj" onclick="showCourse()">添加课程</div>
                <div class="divclear"></div>
                <input type="hidden" name="to_id"/>
                <input type="hidden" name="course_type"/>
                <input type="hidden" name="course_price"/>
                <div class="xbn-kc">
                    <!--<div class="xbnk-l">高三英语春季加强课程  /  面授课  /  ￥800</div>-->
                    <div class="xbnk-l"></div>
                    <div class="xbnk-r">
                        <img src="__PUBLIC__/Home/images/icon_yc.png" onclick="delCourse()"/>
                    </div>
                    <div class="divclear"></div>
                </div>
            </div>

<!--             <div class="imgg">
                <img src="http://www.teach.com/Public/Home/images/ttt/MS202104091360.png">
            </div> -->
            <div class="xb-nr">
                <div class="xbn-zd">代付金额：</div>
                <div class="xbn-je"></div>
                <div class="divclear"></div>
<!--                 <div class="xbn-zd" style="margin-top: 10px;">支付方式：</div>
                <select class="xbn-xl" style="margin-top: 10px;" name="pay_type">
                    <option value="1">微信支付</option>
                    <option value="2">支付宝支付</option>
                </select>
                <div class="divclear"></div> -->
            </div>

            <div class="xb-btn">
                <button class="xbb-l">确认支付</button>
                <button class="xbb-r">取消</button>
                <div class="divclear"></div>
            </div>

        </form>
    </div>

</div>

<!-- 选择课程 弹出框-->
<div class="tck-demo" id="tck-xzkc">

    <div class="tk-box">
        <div class="tkb-title">
            <div class="tkbt-bt">选择课程</div>
            <div class="tkbt-close" onClick="document.getElementById('tck-xzkc').style.display='none'">
                <img src="__PUBLIC__/Home/images/icon_delete.png" />
            </div>
            <div class="divclear"></div>
        </div>
        <div class="tkb-fpxs">
            <form class="tkbf-top">
                <select class="tkbft-xl" name="type">
                    <option value="1">面授课</option>
                    <option value="2">点播课</option>
                    <option value="3">直播课</option>
                </select>
                <select class="tkbft-xl" name="one_type_id">
                    <volist name="parent" id="vo">
                        <option value="{$vo.id}">{$vo.name}</option>
                    </volist>
                </select>
                <select class="tkbft-xl" name="two_type_id">
                    <volist name="child" id="vo">
                        <option value="{$vo.id}">{$vo.name}</option>
                    </volist>
                </select>
                <input type="text" class="tkbft-wb2" placeholder="输入课程名称搜索" name="name">
                <div class="tkbft-ss" onclick="searchCourse()">搜索</div>
                <div class="divclear"></div>
            </form>
            <div class="tkbf-img" id="itemContainer">
                <volist name="course" id="vo">
                    <div class="tkbfi-box">
                        <div class="tkbfib-pic">
                            <img src="{$vo.img_path}" />
                        </div>
                        <div class="tkbfib-bt">{$vo.name}</div>
                        <input type="radio" class="tkbfib-an" name="radioCourseId" data-price="{$vo.price}" data-name="{$vo.name}" value="{$vo.id}">
                    </div>
                </volist>
                <div class="divclear"></div>
            </div>
        </div>
        <div class="tkb-btn" style="width: auto;padding: 0;float: left;margin: 20px 0 0 20px;">
            <div class="page">
                <div class="holder" style="font-size:12px;"></div>
            </div>
        </div>
        <!--<div class="tkb-btn" style="width: auto;padding: 0;float: left;margin: 20px 0 0 20px;">
            <div class="tkbb-an"><</div>
            <div class="tkbb-an tkbb-an-on">1</div>
            <div class="tkbb-an">2</div>
            <div class="tkbb-an">3</div>
            <div class="tkbb-an">></div>
            <div class="divclear"></div>
        </div>-->
        <div class="tkb-qr" style="float: right;margin: 15px 20px 0 0;" onclick="selectCourse()">确定选择</div>
        <div class="divclear"></div>
    </div>



</div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $('.shadowLayer').hide();
    });
    //查询学生
    function checkStudents()
    {
        var students_id_card = $("#students_id_card").val();
        var url = "{:U('Home/Purchasing/getStudentsList')}";
        $.ajax({
            type: "POST", //类型get，post
            url: url, //链接地址
            data:{"id_card":students_id_card},//参数，一般post用
            success: function(data){
                var dataObj = JSON.parse(data);
                console.log(dataObj);
                $(".xbn-jg").empty();
                //成功后函数
                if(dataObj.result == 1){
                    for(var i=0;i<dataObj.data.length;i++){
                        $(".xbn-jg").append("<div class='xbnj-box' onclick='selectStudents(this)' data-id-account='"+dataObj.data[i].id_account+"' data-id-card='"+dataObj.data[i].id_card+"'>"+dataObj.data[i].username+"  /  "+dataObj.data[i].mobile+"  /  "+dataObj.data[i].id_card+"</div>");
                    }
                    $(".xbn-jg").append("<div class='divclear'></div>");
                }else{
                    layer.msg(dataObj.msg);
                }
            },
            error:function(){
                //失败时函数
                layer.msg("失败");
            }
        })
    }

    //选择学生
    function selectStudents(obj){
        $("input[name='id_card']").val($(obj).attr('data-id-card'));
        if($(obj).attr('data-id-account')){
            $("input[name='id_account']").prop('readonly',true);
            $("input[name='id_account']").val($(obj).attr('data-id-account'));
            $('#sjsc').hide();
        }else {
            $("input[name='id_account']").prop('readonly',false);
            $("input[name='id_account']").val("");
            $('#sjsc').show();
        }
        $('.xbnj-box').removeClass('xbnj-box-on');
        $(obj).addClass('xbnj-box-on');
    }

    //生成账号
    function generate()
    {
        var mm=Math.random();
        var six = "";
        if(mm>0.1)
        {
            six=Math.round(mm*1000000);
        }else{
            mm += 0.1;
            six = Math.round(mm*1000000);
        }
        $("input[name='id_account']").val(six);
    }

    //显示课程弹出框
    function showCourse()
    {
        $("#tck-xzkc").show();
        $("div.holder").jPages({
            containerID : "itemContainer",
            perPage: 8
        });
    }

    $(function(){
        //切换课程时，获取相应的分类信息
        $("select[name='type']").change(function(){
            var type = $(this).val();
            var url = "{:U('Home/Purchasing/getType')}";
            $.ajax({
                type: "POST", //类型get，post
                url: url, //链接地址
                data:{"category":type},//参数，一般post用
                success: function(data){
                    var dataObj = JSON.parse(data);
                    //console.log(dataObj);
                    //成功后函数
                    if(dataObj.result == 1){
                        $("select[name='one_type_id']").empty();
                        for(var j=0;j<dataObj.data.parent.length;j++){
                            $("select[name='one_type_id']").append("<option value='"+dataObj.data.parent[j]['id']+"'>"+dataObj.data.parent[j]['name']+"</option>");
                        }

                        $("select[name='two_type_id']").empty();
                        for(var i=0;i<dataObj.data.child.length;i++){
                            $("select[name='two_type_id']").append("<option value='"+dataObj.data.child[i]['id']+"'>"+dataObj.data.child[i]['name']+"</option>");
                        }
                    }
                },
                error:function(){
                    //失败时函数
                    layer.msg("失败");
                }
            })
        });

        //切换一级分类获得二级分类信息
        $("select[name='one_type_id']").change(function(){
            var category = $("select[name='type']").find("option:selected").val();
            var pid = $(this).val();
            var url = "{:U('Home/Purchasing/getChildType')}";
            $.ajax({
                type: "POST", //类型get，post
                url: url, //链接地址
                data:{"category":category,"pid":pid},//参数，一般post用
                success: function(data){
                    var dataObj = JSON.parse(data);
                    //console.log(dataObj);
                    //成功后函数
                    if(dataObj.result == 1){
                        $("select[name='two_type_id']").empty();
                        for(var i=0;i<dataObj.data.length;i++){
                            $("select[name='two_type_id']").append("<option value='"+dataObj.data[i]['id']+"'>"+dataObj.data[i]['name']+"</option>");
                        }
                    }
                },
                error:function(){
                    //失败时函数
                    layer.msg("失败");
                }
            })
        })
    });

    //搜索课程
    function searchCourse()
    {
        var category = $("select[name='type']").find("option:selected").val();
        var one_type_id = $("select[name='one_type_id']").find("option:selected").val();
        var two_type_id = $("select[name='two_type_id']").find("option:selected").val();
        var name = $("input[name='name']").val();
        var url = "{:U('Home/Purchasing/getCourse')}";
        $.ajax({
            type: "POST", //类型get，post
            url: url, //链接地址
            data:{"category":category,"one_type_id":one_type_id,"two_type_id":two_type_id,"name":name},//参数，一般post用
            success: function(data){
                var dataObj = JSON.parse(data);
                console.log(dataObj);
                //成功后函数
                $('#itemContainer').empty();
                if(dataObj.result == 1){
                    var html = "";
                    for(var i=0;i<dataObj.data.length;i++){
                        html += "<div class='tkbfi-box'>"+
                            "<div class='tkbfib-pic'>"+
                            "<img src='"+dataObj.data[i]['img_path']+"'/></div>"+
                            "<div><div class='tkbfib-bt'>"+dataObj.data[i]['name']+"</div></div>"+
                            "<input type='radio' class='tkbfib-an' name='radioCourseId' data-price='"+dataObj.data[i]['price']+"' data-name='"+dataObj.data[i]['name']+"' value='"+dataObj.data[i]['id']+"' /></div>";
                    }
                    html += "<div class='divclear'></div>";
                    $('#itemContainer').append(html);

                    $("div.holder").jPages({
                        containerID : "itemContainer",
                        perPage: 8
                    });
                }
            },
            error:function(){
                //失败时函数
                layer.msg("失败");
            }
        })
    }

    //确定选择课程
    function selectCourse()
    {
        var course_id = $(".tkbfib-an:checked").val();
        var name = $(".tkbfib-an:checked").attr("data-name");
        var price = $(".tkbfib-an:checked").attr("data-price");
        var type = $("select[name='type']").find("option:selected").val();
        var category = "";
        if(type == '1'){
            category = '面授课';
        }else if(type == '2'){
            category = '点播课';
        }else {
            category = '直播课';
        }
        $(".xbnk-l").text(name+"  /  "+category+"  /  "+price);
        $(".xbn-je").text("￥"+price+"元");
        $("input[name='to_id']").val(course_id);
        $("input[name='course_type']").val(type);
        $("input[name='course_price']").val(price);
        $("#tck-xzkc").hide();
    }

    //删除选中的课程
    function delCourse()
    {
        $(".xbnk-l").text("");
        $(".xbn-je").text("");
        $("input[name='to_id']").val("");
        $("input[name='course_type']").val("");
        $("input[name='course_price']").val("");
    }

    //点击支付
    $('.xbb-l').click(function(){
        var id_card=$("input[name='id_card']").val();
        var id_account=$("input[name='id_account']").val();
        var to_id=$("input[name='to_id']").val();
        var course_price=$("input[name='course_price']").val();
        var course_type=$("input[name='course_type']").val();
        var pay_type=$("select[name='pay_type']").find("option:selected").val();
        // if(pay_type == 1){
        //     //微信支付
        //     var url = "{:U('Home/Purchasing/aggregate_payment')}";
        //     $.ajax({
        //         url:url,
        //         data:{id_card:id_card,id_account:id_account,to_id:to_id,course_price:course_price,course_type:course_type,pay_type:pay_type},
        //         type:"POST",
        //         success: function(data){
        //             // console.log(data.info);return false;
        //             var tt='<img src="'+data.info+'" />';
        //             $('.imgg').html(tt);
        //         }
        //     })
        // }else{
            //支付宝支付
            var url = "{:U('Home/Purchasing/aggregate_payment')}";
            $.ajax({
                url:url,
                data:{id_card:id_card,id_account:id_account,to_id:to_id,course_price:course_price,course_type:course_type,pay_type:pay_type},
                type:"POST",
                success: function(data){
                    var dataObj = JSON.parse(data);
                    var tt='<img src="'+dataObj.info+'" />';
                    $('.qrImage').html(tt);
                    $('.shadowLayer').show();
                    setTimeout(function(){
                        location.href="{:U('Home/Purchasing/purchasingAgentList')}";
                    },9000);
                }
            })
        // }
        return false;
        
    })
</script>
</html>
